<template>
  <view :style="themeColor">
    <view class="page">
      <view class="flex benben-position-layout flex flex-wrap align-center farmtoolsDetail_flex_0"
        :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
        <view class='flex flex-wrap align-center justify-between flex-sub farmtoolsDetail_fd0_0'>
          <view class='flex flex-wrap align-center farmtoolsDetail_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back"
            data-url="1">
            <text class='fu-iconfont2  farmtoolsDetail_fd0_0_c0_c0'>&#xE794;</text>
          </view>
          <view class='flex flex-wrap align-stretch justify-center'>
            <text class='farmtoolsDetail_fd0_0_c1_c0'>农具详情</text>
          </view>
          <view class='flex flex-wrap align-center justify-end farmtoolsDetail_fd0_0_c0'>
          </view>
        </view>

      </view>
      <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
      <!---flex布局flex布局开始-->
      <view class="flex benben-flex-layout flex-wrap align-center">
        <view style="position: relative">
          <swiper ref="benbenSwiperfd1_0" @change="bannerIndexfd1_0 = $event.detail.current"
            class='flex position-relative farmtoolsDetail_fd1_0' previous-margin="0rpx" next-margin="0rpx"
            :display-multiple-items="1" :interval="5000" :duration="500" :autoplay='true' :circular='true'
            indicator-color="rgba(0, 0, 0, .3)" indicator-active-color="#000000">

            <template v-for='(item,key0) in productDetails.images'>
              <swiper-item class='flex  farmtoolsDetail_fd1_0' :key='key0'>
                <image class='farmtoolsDetail_fd1_0' mode="aspectFill" :src='item'></image>
              </swiper-item>
            </template>

          </swiper>
          <view style="position: absolute;"
            class="flex dot flex align-center justify-center farmtoolsDetail_swiperDotfd1_0">
            <template v-for="(item, index) in (productDetails.images.length)">
              <view :key="index" v-if="bannerIndexfd1_0 == index"
                class="flex dot selected flex align-center justify-center farmtoolsDetail_swiperDotSelectedfd1_0">
              </view>
              <view :key="index" v-else
                class="flex dot unselected flex align-center justify-center farmtoolsDetail_swiperDotUnselectedfd1_0">
              </view>
            </template>
          </view>
        </view>
      </view>

      <!---flex布局flex布局结束-->
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout farmtoolsDetail_flex_2"
       >
        <view class='flex flex-direction flex-wrap align-stretch farmtoolsDetail_fd2_0'>
          <view class='flex flex-wrap align-center farmtoolsDetail_fd2_0_c0'>
            <text class='farmtoolsDetail_fd2_0_c0_c0'>{{productDetails.chat_price}}</text>
            <text class='farmtoolsDetail_fd2_0_c0_c1'>积分</text>
          </view>
          <text class='flex farmtoolsDetail_fd2_0_c1'>{{productDetails.name}}</text>
          <view class='flex align-center'>
            <text class='farmtoolsDetail_fd2_0_c2_c0' v-for='(item,key0) in productDetails.category_name' :key='key0'>{{item}}</text>
          </view>

        </view>
        <view class='flex flex-direction flex-wrap align-stretch farmtoolsDetail_fd2_1'>
          <view class='flex flex-wrap align-center'>
            <view class='flex flex-wrap align-center farmtoolsDetail_fd2_1_c0_c0'>
            </view>
            <text class='farmtoolsDetail_fd2_1_c0_c1'>农具简介</text>
          </view>
          <text class='farmtoolsDetail_fd2_1_c1'>{{productDetails.description}}</text>
        </view>
        <image class='farmtoolsDetail_fd2_2'  @tap.stop="handleJumpDiy" data-type="navigateTo" :data-url="`/pages/my/activateMembership/activateMembership`" mode="aspectFill" :src='STATIC_URL+"22.png"'></image>
        <view class='flex flex-direction flex-wrap align-stretch flex-sub farmtoolsDetail_fd2_3'>
          <view class='flex flex-wrap align-center farmtoolsDetail_fd2_3_c0'>
            <view class='flex flex-wrap align-center farmtoolsDetail_fd2_1_c0_c0'>
            </view>
            <text class='farmtoolsDetail_fd2_1_c0_c1'>借还流程</text>
            <text class='farmtoolsDetail_fd2_3_c0_c2' @tap.stop="handleJumpDiy" data-type="navigateTo"
              :data-url="`/pages/homePages/BorrowingReturningdetails/BorrowingReturningdetails`">查看</text>
          </view>
          <view class='flex flex-direction flex-wrap align-stretch'>
            <view class='flex flex-wrap align-start justify-between flex-sub farmtoolsDetail_fd2_3_c1_c0'>
              <view class='flex flex-direction flex-wrap align-center farmtoolsDetail_fd2_3_c1_c0_c0'>
                <image class='farmtoolsDetail_fd2_3_c1_c0_c0_c0' mode="aspectFit" :src='STATIC_URL+"23.png"'></image>
                <text class='farmtoolsDetail_fd2_3_c1_c0_c0_c1'>选择农具
                  加入农具</text>
              </view>
              <image class='farmtoolsDetail_fd2_3_c1_c0_c1' mode="aspectFit" :src='STATIC_URL+"27.png"'></image>
              <view class='flex flex-direction flex-wrap align-center farmtoolsDetail_fd2_3_c1_c0_c0'>
                <image class='farmtoolsDetail_fd2_3_c1_c0_c0_c0' mode="aspectFit" :src='STATIC_URL+"24.png"'></image>
                <text class='farmtoolsDetail_fd2_3_c1_c0_c2_c1'>农具选择
                  一键下单</text>
              </view>
              <image class='farmtoolsDetail_fd2_3_c1_c0_c1' mode="aspectFit" :src='STATIC_URL+"27.png"'></image>
              <view class='flex flex-direction flex-wrap align-center farmtoolsDetail_fd2_3_c1_c0_c0'>
                <image class='farmtoolsDetail_fd2_3_c1_c0_c0_c0' mode="aspectFit" :src='STATIC_URL+"25.png"'></image>
                <text class='farmtoolsDetail_fd2_3_c1_c0_c4_c1'>后台审核
                  还农具同步</text>
              </view>
              <image class='farmtoolsDetail_fd2_3_c1_c0_c1' mode="aspectFit" :src='STATIC_URL+"27.png"'></image>
              <view class='flex flex-direction flex-wrap align-center farmtoolsDetail_fd2_3_c1_c0_c0'>
                <image class='farmtoolsDetail_fd2_3_c1_c0_c0_c0' mode="aspectFit" :src='STATIC_URL+"26.png"'></image>
                <text class='farmtoolsDetail_fd2_3_c1_c0_c2_c1'>订单完成</text>
              </view>
            </view>
          </view>
        </view>
        <view class='flex flex-direction flex-wrap align-stretch farmtoolsDetail_fd2_4'>
          <view class='flex flex-wrap align-center farmtoolsDetail_fd2_3_c0'>
            <view class='flex flex-wrap align-center farmtoolsDetail_fd2_1_c0_c0'>
            </view>
            <text class='farmtoolsDetail_fd2_1_c0_c1'>图文详情</text>
          </view>
          <!-- <image class='farmtoolsDetail_fd2_4_c1' mode="aspectFit" :src='productDetails.body'></image> -->
          <view class="farmtoolsDetail_fd2_4_c1" v-html="productDetails.body"> </view>
        </view>
        <view class='flex flex-direction flex-wrap align-stretch farmtoolsDetail_fd2_5'>
          <view class='flex flex-wrap align-center farmtoolsDetail_fd2_3_c0'>
            <view class='flex flex-wrap align-center farmtoolsDetail_fd2_1_c0_c0'>
            </view>
            <text class='farmtoolsDetail_fd2_1_c0_c1'>评价（</text>
            <text class='farmtoolsDetail_fd2_1_c0_c1'>{{productDetails.comment_total}}</text>
            <text class='farmtoolsDetail_fd2_1_c0_c1'>）</text>
          </view>
          <template v-for='(item,key0) in productDetails.comment'>
            <view class='flex flex-direction flex-wrap align-stretch' :key='key0'>
              <view class='flex flex-wrap align-center farmtoolsDetail_fd2_3_c0'>
                <image class='farmtoolsDetail_fd2_5_c1_c0_c0' mode="aspectFill" :src='item.head_img'></image>
                <text class='farmtoolsDetail_fd2_5_c1_c0_c1'>{{item.user_nickname}}</text>
                <text class='farmtoolsDetail_fd2_5_c1_c0_c2'>{{item.create_time}}</text>
              </view>
              <text class='farmtoolsDetail_fd2_5_c1_c1'>{{item.content}}</text>
            </view>
          </template>

        </view>
      </view>

      <!---flex布局flex布局结束-->
      <view class="flex benben-position-layout flex flex-wrap align-center farmtoolsDetail_flex_3">
        <view class='flex flex-direction flex-wrap align-center farmtoolsDetail_fd3_0' @tap.stop="handleJumpDiy"
          data-type="switchTab" :data-url="`/pages/tabBar/agriculturalToolrack/agriculturalToolrack`">
          <view class='flex flex-wrap align-center farmtoolsDetail_fd3_0_c0'>
            <benben-message-num class='farmtoolsDetail_fd3_0_c0_c0' :message-num="data.num" size='24' color='#fff'
              background-color='red'>
            </benben-message-num>
          </view>
          <text class='farmtoolsDetail_fd3_0_c1'>农具架</text>
        </view>
        <button class='farmtoolsDetail_fd3_1' @tap.stop="addShoppingFunc()">加入农具架</button>

      </view>
      <view :style="{height: '130rpx'}"></view>


    </view>
  </view>
</template>
<script>
  import {
    validate
  } from '@/common/utils/validate.js'
  export default {
    components: {},


    data() {
      return {
        "bannerIndexfd1_0": 0,
        "information": 7,
        "productDetails": {
          "aid": "",
          "name": "",
          "goodscategory_name": "",
          "is_recommend": "",
          "thumb": "",
          "shop_price": "",
          "sn": "",
          "market_price": "",
          "click": "",
          "sort": "",
          "is_boutique": "",
          "is_sale": "",
          "create_time": "",
          "is_shipping": "",
          "amount_condition": "",
          "is_integral": "",
          "video_img": "",
          "is_wholesale": "",
          "member_price": "",
          "sales_sum": "",
          "images": [],
          "body": "",
          "praise_rate": "",
          "comment_total": "",
          "is_collect": "",
          "comment": [],
          "freight_explain": "",
          "freight_name": "",
          "coupon_list": [],
          "spec_list": [],
          "stock": "",
          "id": "",
          "cid": "",
          "adslogan": "",
          "spectypeid": "",
          "is_new": "",
          "is_hot": "",
          "description": "",
          "is_spec": "",
          "support_self_mention": "",
          "freight_price": "",
          "discounts": "",
          "share_award_money": "",
          "goods_label_service": [],
          "goods_label_activity": "",
          "freight_template_id": "",
          "video": "",
          "sku_list": [],
          "activity_spec_list": [],
          "activity_sku_list": [],
          "attr_value": [],
          "activity_info": {
            "activity_id": "",
            "activity_type": "",
            "start_time": "",
            "end_time": "",
            "sdate": "",
            "edate": "",
            "surplus_time": "",
            "join_number": "",
            "activity_price": "",
            "type": "",
            "is_group": "",
            "activity_group": {
              "join_list": [],
              "join_num": "",
              "num": ""
            }
          },
          "activity_group": {
            "join_list": [],
            "join_num": "",
            "num": ""
          },
          "activity_price": "",
          "activity_stock": "",
          "order_paid": "",
          "user_level": "",
          "sale_top_name": "",
          "question_total": "",
          "question_list": [],
          "goods_type": "",
          "chat_price": "",
          "sku_id": "",
          "key": "",
          "key_name": "",
          "member_activity_price": "",
          "deposit": "",
          "limit": "",
          "sales_integral": "",
          "is_pure_integral": "",
          "balance": "",
          "category_name": [],
          "detail_vip": "",
          "borrow_image": "",
          "borrow_content": ""
        },
        "data": {
          "num": ""
        },
        "id": "1"
      };
    },
    computed: {
      themeColor() {
        return this.$store.getters.themeColor
      },
      isLogin() {
        return this.$store.state.token == '' ? false : true;
      }
    },
    watch: {},
    onLoad(options) {
      let {
        id
      } = options
      if (id !== undefined) this.id = id
      this.getfarmDetailsFunc()
      this.getDataFunc()
    },
    onShareAppMessage(res) {
      return {
        title: this.productDetails.name,
        path: `/pages/homePages/farmtoolsDetail/farmtoolsDetail?id=${this.id}`,
        imageUrl: this.productDetails.thumb,
      }
    },
    onUnload() {

    },
    onReady() {

    },
    onShow() {

    },
    onHide() {

    },
    onResize() {

    },
    onPullDownRefresh() {

    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {

      //获取农具详情
      async getfarmDetailsFunc() {
        //请求方法
        //数据验证

        let dataproductDetails = await this.$api.get(global.apiUrls.post62b91c846995e, {
          aid: this.id
        });

        if (dataproductDetails.data.code != 1) {
          this.$message.info(dataproductDetails.data.msg);
          return
        }
        let infoproductDetails = dataproductDetails.data;
        this.productDetails = infoproductDetails.data
      },
      //获取购物车数量
      async getDataFunc() {
        //请求方法
        //数据验证

        let datadata = await this.$api.get(global.apiUrls.post62cf8f1f0370b, {

        });

        if (datadata.data.code != 1) {
          this.$message.info(datadata.data.msg);
          return
        }
        let infodata = datadata.data;
        this.data = infodata.data
      },
      //添加购物车
      async addShoppingFunc() {
        console.log('addShoppingFunc')
        if(!this.isLogin){
          this.$message.info('未登录，请先登录')
          uni.navigateTo({
            url:`/pages/dlzc/login/login`
          })
          return;
        }
        //请求方法
        //数据验证

        let data62b996b0120bf = await this.$api.get(global.apiUrls.post62b996b0120bf, {
          goods_id: this.id,
          // num: this.productDetails.sales_sum
          num:1
        });

        if (data62b996b0120bf.data.code != 1) {
          this.$message.info(data62b996b0120bf.data.msg);
          return
        }


        if (this.productDetails.is_collect == 0) {
          this.$message.info('添加成功');
          this.getDataFunc()
        } else {
          this.$message.info('已添加止购物车');
        }
      }
    }
  };
</script>
<style lang="scss" scoped>
  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: var(--benbenbgColor0);
    background-size: 100% auto;
  }

  .farmtoolsDetail_flex_0 {
    background: #fff;
    width: 750rpx;
    height: 88rpx;
    overflow: hidden;
    z-index: 10;
    top: 0rpx;
    background-size: 100% auto !important;
  }

  .farmtoolsDetail_fd0_0_c1_c0 {
    font-size: 36rpx;
    font-weight: 500;
    color: #333333;
  }

  .farmtoolsDetail_fd0_0_c0_c0 {
    font-size: 36rpx;
    color: #333;
  }

  .farmtoolsDetail_fd0_0_c0 {
    width: 120rpx;
  }

  .farmtoolsDetail_fd0_0 {
    padding: 0rpx 32rpx 0rpx 32rpx;
  }

  .farmtoolsDetail_fd1_0 {
    width: 750rpx;
    height: 750rpx;
  }

  .farmtoolsDetail_swiperDotUnselectedfd1_0 {
    border: 1px solid rgba(0, 0, 0, 0.3);
    width: 32rpx;
    height: 32rpx;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
    margin: 0rpx 6rpx 0rpx 0rpx;
    font-size: 24rpx;
    color: #fff;
  }

  .farmtoolsDetail_swiperDotSelectedfd1_0 {
    border: 1px solid #00A7FF;
    width: 32rpx;
    height: 32rpx;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
    margin: 0rpx 6rpx 0rpx 0rpx;
    font-size: 24rpx;
    color: #fff;
  }

  ::v-deep .farmtoolsDetail_swiperDotfd1_0 {
    position: absolute;
    bottom: 20rpx;
    left: 0rpx;
    right: 0rpx;
  }

  .farmtoolsDetail_flex_2 {
    margin: 0rpx 24rpx 0rpx 24rpx;
    padding: 0rpx 0rpx 32rpx 0rpx;
  }

  .farmtoolsDetail_fd2_5_c1_c1 {
    color: #333333;
    font-size: 28rpx;
    font-weight: 400;
  }

  .farmtoolsDetail_fd2_5_c1_c0_c2 {
    margin: 0rpx 0rpx 0rpx auto;
    color: #999999;
    font-size: 24rpx;
    font-weight: 400;
  }

  .farmtoolsDetail_fd2_5_c1_c0_c1 {
    color: #333333;
    font-size: 24rpx;
    font-weight: 500;
  }

  .farmtoolsDetail_fd2_5_c1_c0_c0 {
    width: 64rpx;
    height: 64rpx;
    margin: 0rpx 16rpx 0rpx 0rpx;
    border-radius: 16rpx;
  }

  .farmtoolsDetail_fd2_5 {
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    padding: 32rpx 24rpx 32rpx 24rpx;
  }

  .farmtoolsDetail_fd2_4_c1 {
    width: 654rpx;
    height: 750rpx;
  }

  .farmtoolsDetail_fd2_4 {
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    margin: 0rpx 0rpx 32rpx 0rpx;
    padding: 32rpx 24rpx 32rpx 24rpx;
  }

  .farmtoolsDetail_fd2_3_c1_c0_c4_c1 {
    font-size: 28rpx;
    font-weight: 400;
    color: #000000;
    line-height: 36rpx;
    margin: 16rpx 0rpx 0rpx 0rpx;
    text-align: center;
  }

  .farmtoolsDetail_fd2_3_c1_c0_c2_c1 {
    font-size: 28rpx;
    font-weight: 400;
    color: #000000;
    line-height: 36rpx;
    margin: 16rpx 0rpx 0rpx 0rpx;
  }

  .farmtoolsDetail_fd2_3_c1_c0_c1 {
    width: 10rpx;
    height: 16rpx;
    margin: 30rpx 0rpx 0rpx 0rpx;
  }

  .farmtoolsDetail_fd2_3_c1_c0_c0_c1 {
    font-size: 28rpx;
    font-weight: 400;
    color: #000000;
    margin: 16rpx 0rpx 0rpx 0rpx;
  }

  .farmtoolsDetail_fd2_3_c1_c0_c0_c0 {
    width: 64rpx;
    height: 64rpx;
  }

  .farmtoolsDetail_fd2_3_c1_c0_c0 {
    position: relative;
    margin: 0rpx 0rpx 32rpx 0rpx;
    width: 144rpx;
    height: 160rpx;
  }

  .farmtoolsDetail_fd2_3_c1_c0 {
    height: 146rpx;
  }

  .farmtoolsDetail_fd2_3_c0_c2 {
    color: #E63838;
    font-size: 24rpx;
    font-weight: 400;
    margin: 0rpx 0rpx 0rpx auto;
  }

  .farmtoolsDetail_fd2_3_c0 {
    margin: 24rpx 0rpx 12rpx 0rpx;
  }

  .farmtoolsDetail_fd2_3 {
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    padding: 32rpx 24rpx 0rpx 24rpx;
    margin: 0rpx 0rpx 24rpx 0rpx;
  }

  .farmtoolsDetail_fd2_2 {
    width: 702rpx;
    height: 188rpx;
    margin: 0rpx 0rpx 24rpx 0rpx;
  }

  .farmtoolsDetail_fd2_1_c1 {
    color: #333333;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 44rpx;
    margin: 16rpx 0rpx 0rpx 0rpx;
  }

  .farmtoolsDetail_fd2_1_c0_c1 {
    color: #333333;
    font-size: 28rpx;
    font-weight: 500;
  }

  .farmtoolsDetail_fd2_1_c0_c0 {
    background: #E63838;
    border-radius: 4rpx 4rpx 4rpx 4rpx;
    width: 4rpx;
    height: 24rpx;
    margin: 0rpx 16rpx 0rpx 0rpx;
  }

  .farmtoolsDetail_fd2_1 {
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    margin: 16rpx 0rpx 24rpx 0rpx;
    padding: 32rpx 0rpx 32rpx 24rpx;
  }

  .farmtoolsDetail_fd2_0_c2_c0 {
    color: #999999;
    font-size: 24rpx;
    font-weight: 400;
    margin: 0rpx 16rpx 0rpx 0rpx;
  }

  .farmtoolsDetail_fd2_0_c1 {
    color: #333333;
    font-size: 28rpx;
    font-weight: 500;
    width: 100%;
    margin: 0rpx 0rpx 8rpx 0rpx;
  }

  .farmtoolsDetail_fd2_0_c0_c1 {
    color: rgba(230, 56, 56, 1);
    font-size: 24rpx;
    font-weight: 700;
  }

  .farmtoolsDetail_fd2_0_c0_c0 {
    color: rgba(230, 56, 56, 1);
    font-size: 36rpx;
    font-weight: 700;
  }

  .farmtoolsDetail_fd2_0_c0 {
    margin: 0rpx 0rpx 16rpx 0rpx;
  }

  .farmtoolsDetail_fd2_0 {
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    margin: -40rpx 0rpx 0rpx 0rpx;
    padding: 32rpx 24rpx 32rpx 24rpx;
    position: relative;
    z-index: 11;
  }

  .farmtoolsDetail_flex_3 {
    background: var(--benbenbgColor1);
    width: 750rpx;
    height: 130rpx;
    overflow: hidden;
    z-index: 10;
    bottom: calc(0rpx + var(--window-bottom));
    background-size: 100% auto;
  }

  .farmtoolsDetail_fd3_1 {
    background: #E63838;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    width: 258rpx;
    line-height: 80rpx;
    font-size: 32rpx;
    color: #fff;
    height: 80rpx;
    margin: 0rpx 24rpx 0rpx auto;
  }

  .farmtoolsDetail_fd3_0_c1 {
    color: #333333;
    font-size: 22rpx;
    font-weight: 400;
    margin: 4rpx 0rpx 0rpx 0rpx;
  }

  .farmtoolsDetail_fd3_0_c0_c0 {
    position: absolute;
    right: -14rpx;
    top: -8rpx;
  }

  .farmtoolsDetail_fd3_0_c0 {
    background: url(https://api.nongjugongxiang.com/nongju/images/38.png) no-repeat;
    width: 48rpx;
    height: 48rpx;
    background-size: 100% auto;
    position: relative;
  }

  .farmtoolsDetail_fd3_0 {
    margin: 0rpx 0rpx 0rpx 24rpx;
  }
</style>
